<template>
  <div class="flex jsContentCen alignItemCen h100vh login">
    <div class="flex flexColumn">
      <h2 class="textCen pb20">优选餐饮系统登陆</h2>
      <el-input
        placeholder="请输入账号"
        prefix-icon="el-icon-user-solid"
        v-model="acc"
        clearable
        class="input mb20"
      >
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="pwd"
        clearable
        show-password
        prefix-icon="el-icon-lock"
        class="input mb20"
      ></el-input>
      <p v-show="loginTip" class="tip">您的账号或密码有误</p>
      <Verify
        @success="success"
        @error="alert('error')"
        type="puzzle"
        imgUrl=""
        :imgSize="imgSize"
        :imgName="imgName"
      ></Verify>
      <el-button type="primary" class="input" @click="loginFn">登录</el-button>
      <div class="img textCen">
        <img
          src="http://goss1.cfp.cn/creative/vcg/nowater800/new/VCG211284063227.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
    


<script>
import { login } from "../apis/user";
import Verify from "vue2-verify";
const errorJpg = require("../assets/img/404.jpg");
export default {
  data() {
    return {
      pwd: "",
      acc: "",
      loginTip: false,
      imgName: [errorJpg],
      imgSize: { width: "100%", height: "400px" },
    };
  },
  methods: {
    success() {
      console.log(this.imgUrl);
    },
    alert(text) {
      console.log(text);
    },
    loginFn() {
      login({ account: this.acc, password: this.pwd }).then((res) => {
        if (res.data.code == 0) {
          localStorage.id = res.data.id;
          localStorage.token = res.data.token;
          localStorage.role = res.data.role;
          this.$router.push("./home/homemain");
          this.$message({
            message: "优选系统提示: 恭喜你，" + this.acc + "登录成功",
            type: "success",
          });
        } else {
          this.loginTip = true;
        }
      });
    },
  },
  components: {
    Verify,
  },
};
</script>

<style lang="less" scoped>
a {
  color: #fff;
}
.login {
  background-color: #e1f4f3;
  img {
    height: 400px;
    padding-top: 20px;
  }
  h2 {
    color: #454552;
    font-size: 30px;
    padding-bottom: 40px;
  }
  .input {
    width: 600px;
  }
}
</style>